src/utils/getPercentage.ts (1)

2-5: 엣지 케이스 처리 검토 권장.

part === 0 조건은 수학적으로 불필요합니다 (0/total * 100 = 0). 또한 음수 값이나 part > total인 경우의 동작을 고려해 보세요.

♻️ 개선 제안

 // 백분율 값 정수로 계산
 export const getPercentage = (part: number, total: number): number => {
-  if (total === 0 || part === 0) return 0;
-  return Math.round((part / total) * 100);
+  if (total === 0) return 0;
+  const percentage = Math.round((part / total) * 100);
+  return Math.max(0, Math.min(100, percentage)); // 0-100 범위로 제한
 };

src/components/home/Header.tsx (1)

7-33: 전반적으로 LGTM!

홈 헤더 컴포넌트가 잘 구현되어 있습니다. 몇 가지 개선 포인트가 있습니다:

1. Line 27의 AlarmIcon에 cursor-pointer가 적용되어 있지만 클릭 핸들러가 없어 사용자 경험에 혼란을 줄 수 있습니다.
2. Line 14-16의 FriendIcon도 클릭 가능해 보이지만 핸들러가 없습니다 (향후 친구 기능 추가 예정이라면 괜찮습니다).

♻️ 접근성 개선 제안

             <button
               className="relative cursor-pointer"
               onClick={() => setIsAlarmNew(false)}
+              aria-label="새 알림 확인"
             >

src/components/common/FullButton.tsx (2)

20-27: 중첩 삼항 연산자 대신 객체 매핑 사용을 권장합니다.

현재 중첩된 삼항 연산자는 가독성이 떨어지고, text-button-sb가 모든 분기에서 중복됩니다. 또한 Line 40의 <span>에도 동일한 클래스가 적용되어 이중 적용됩니다.

♻️ 객체 매핑으로 리팩터링

+ const colorSchemeClasses = {
+   mint: "bg-mint-01",
+   orange: "bg-orange-00",
+   blue: "bg-blue-00",
+ } as const;
+
- const activeClass =
-   colorScheme === "mint"
-     ? "bg-mint-01 text-white text-button-sb"
-     : colorScheme === "orange"
-       ? "bg-orange-00 text-white text-button-sb"
-       : colorScheme === "blue"
-         ? "bg-blue-00 text-white text-button-sb"
-         : "";
+ const activeClass = `${colorSchemeClasses[colorScheme]} text-white text-button-sb`;

---

39-41: text-button-sb 클래스 중복 적용

activeClass와 inactiveClass에 이미 text-button-sb가 포함되어 있는데, Line 40의 <span>에도 동일한 클래스가 적용되어 있습니다. 중복을 제거하세요.

♻️ 중복 클래스 제거

       <div className="flex h-[58px] items-center justify-center">
-        <span className="text-button-sb">{children}</span>
+        <span>{children}</span>
       </div>

src/components/home/ProgressBar.tsx (1)

1-17: LGTM - 단순하고 효과적인 구현입니다.

한 가지 방어적 코딩 제안: percentage 값이 0-100 범위를 벗어날 경우를 대비하여 클램핑을 고려해 보세요.

♻️ 방어적 코딩 제안

 export const ProgressBar = ({
   percentage,
   haveTodayChat,
 }: ProgressBarProps) => {
+  const clampedPercentage = Math.min(100, Math.max(0, percentage));
   return (
     <div className="bg-neutral-08 flex h-2 w-full rounded-sm">
       <div
         className={`${haveTodayChat ? "bg-mint-02" : "bg-orange-01"} rounded-s-sm`}
-        style={{ width: `${percentage}%` }}
+        style={{ width: `${clampedPercentage}%` }}
       ></div>
     </div>
   );
 };

src/components/common/HeaderWithIcon.tsx (1)

8-8: 사용되지 않는 import

FriendIcon이 import되었지만 컴포넌트에서 사용되지 않습니다. 제거하거나, 향후 사용 예정이라면 TODO 주석을 추가하세요.

♻️ 미사용 import 제거

 import AlarmIcon from "@/assets/bell.svg";
-import FriendIcon from "@/assets/friend.svg";
 import PencilIcon from "@/assets/pencil.svg";

src/app/page.tsx (1)

19-21: NavBar 래퍼의 중복된 fixed 포지셔닝 확인 필요.

NavBar 컴포넌트 내부에 이미 fixed bottom-0 left-1/2 -translate-x-1/2가 적용되어 있습니다. 외부 래퍼 div에 추가로 fixed bottom-0를 적용하면 예상치 못한 레이아웃 문제가 발생할 수 있습니다.

래퍼를 제거하거나, NavBar 컴포넌트의 포지셔닝 방식을 통일하는 것을 권장합니다.

♻️ 제안된 수정

       <div className="pb-[119px]">
         <ChatProgress />
       </div>
-      <div className="fixed bottom-0 w-full max-w-[440px]">
-        <NavBar />
-      </div>
+      <NavBar />
     </main>

src/utils/getPlantStatus.ts (1)

3-5: 타입 정의와 유효하지 않은 날짜 처리 개선 필요

1. 파라미터 타입이 string이지만, falsy 체크(!recentWateredTime)는 null이나 undefined를 처리하려는 의도로 보입니다. 타입을 명확히 하는 것이 좋습니다.
2. 유효하지 않은 날짜 문자열이 전달되면 NaN이 반환되어 예기치 않은 동작이 발생할 수 있습니다.

♻️ 개선 제안

-export const getPlantStatus = (recentWateredTime: string) => {
-  if (!recentWateredTime) return PlantWaterStatus.EMPTY;
-  const wateredAt = new Date(recentWateredTime).getTime();
+export const getPlantStatus = (recentWateredTime: string | null | undefined) => {
+  if (!recentWateredTime) return PlantWaterStatus.EMPTY;
+  const wateredAt = new Date(recentWateredTime).getTime();
+  if (Number.isNaN(wateredAt)) return PlantWaterStatus.EMPTY;

src/components/home/ChatProgress.tsx (3)

10-11: 정렬 로직 메모이제이션 고려

sortChatProgress가 매 렌더링마다 호출됩니다. 데이터가 변경되지 않는 한 불필요한 재정렬을 방지하기 위해 useMemo를 사용하는 것이 좋습니다.

♻️ useMemo 적용 제안

+import { useMemo } from "react";
+
 export const ChatProgress = () => {
-  const sortedData = sortChatProgress(chatProgressData);
+  const sortedData = useMemo(
+    () => sortChatProgress(chatProgressData),
+    [chatProgressData]
+  );

---

19-61: 빈 데이터 상태 처리 누락

chatProgressData가 비어있을 경우 아무것도 렌더링되지 않습니다. PlantProgress 컴포넌트처럼 빈 상태에 대한 UI를 추가하는 것이 좋습니다.

♻️ 빈 상태 처리 예시

       <div className="px-4 py-[10px]">
+        {sortedData.length === 0 ? (
+          <p className="text-neutral-05 text-center">이번 주 대화 기록이 없어요</p>
+        ) : (
         {sortedData.map(data => {
           // ... existing code
         })}
+        )}
       </div>

---

24-30: 이미지 로딩 실패 시 fallback 처리 고려

profileImg가 유효하지 않거나 로딩에 실패할 경우 깨진 이미지가 표시될 수 있습니다. 기본 프로필 이미지나 placeholder를 고려해 보세요.

src/components/home/Bubble.tsx (2)

16-30: switch문에 default case 또는 명시적 반환 타입 추가 권장

현재 모든 PlantWaterStatus 케이스를 처리하지만, 명시적 반환 타입이나 default case를 추가하면 타입 안전성이 향상됩니다. 예상치 못한 값이 전달될 경우 undefined가 반환될 수 있습니다.

♻️ 개선 제안

-export const Bubble = ({ status }: BubbleProps) => {
+export const Bubble = ({ status }: BubbleProps): JSX.Element => {
   switch (status) {
     case PlantWaterStatus.EMPTY: {
       return <YellowCircle />;
     }
     case PlantWaterStatus.WATERED_RECENTLY: {
       return <GreenCircle />;
     }
     case PlantWaterStatus.WATERABLE: {
       return <BlueCircle />;
     }
     case PlantWaterStatus.WITHERED: {
       return <RedCircle />;
     }
+    default: {
+      const _exhaustiveCheck: never = status;
+      return <YellowCircle />;
+    }
   }
 };

---

3-6: 파일 명명 규칙 불일치

red_circle.svg는 언더스코어를 사용하지만, 다른 파일들은 하이픈을 사용합니다(blue-circle.svg, green-circle.svg, yellow-circle.svg). 일관성을 위해 red-circle.svg로 변경하는 것을 권장합니다.

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Learnt from: lemoncurdyogurt
Repo: IT-Cotato/12th-SimTok-FE PR: 3
File: src/utils/formatPhone.ts:6-9
Timestamp: 2026-01-02T13:08:01.441Z
Learning: In phone number formatting/validation logic, enforce that Korean numbers are valid only as 10-digit landlines or 11-digit mobile numbers starting with 010. Do not perform strict intermediate-length formatting for 7–9 digits during input; assume intermediate values are not considered valid until they reach 10 or 11 digits. Implement or update validation to accept only 10 or 11 digits (with 010 prefix for mobiles) and, if formatting is needed during input, preserve user-friendly partial handling without emitting strict validation errors for intermediate states.

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}

src/components/common/HeaderWithIcon.tsx (2)

45-50: 접근성 개선: PencilIcon을 버튼으로 감싸세요.

AlarmIcon과 달리 PencilIcon이 버튼 없이 직접 클릭 핸들러를 가지고 있습니다. 스크린 리더와 키보드 내비게이션을 위해 버튼으로 감싸는 것이 좋습니다.

♻️ 접근성 개선 제안

         {havePencil && (
-          <PencilIcon
-            className="h-6 w-6 cursor-pointer"
-            onClick={pencilClick}
-          />
+          <button className="cursor-pointer" onClick={pencilClick}>
+            <PencilIcon className="h-6 w-6" />
+          </button>
         )}

---

42-44: cursor-pointer가 있지만 클릭 핸들러가 없습니다.

isAlarmNew가 false일 때 AlarmIcon에 cursor-pointer가 있지만 클릭 이벤트가 없어서 사용자에게 혼란을 줄 수 있습니다.

♻️ 수정 제안

         ) : (
-          <AlarmIcon className="h-6 w-6 cursor-pointer" />
+          <AlarmIcon className="h-6 w-6" />
         )}

src/components/home/Header.tsx (1)

17-19: 아이콘 버튼에 접근성 속성 추가를 권장합니다.

아이콘만 있는 버튼의 경우 스크린 리더 사용자를 위해 aria-label을 추가하는 것이 좋습니다. 또한 버튼 내부의 cursor-pointer는 중복이므로 제거할 수 있습니다.

♿ 접근성 개선 제안

-        <button onClick={() => router.push("/friends")}>
-          <FriendIcon className="text-neutral-03 cursor-pointer" />
+        <button onClick={() => router.push("/friends")} aria-label="친구 목록">
+          <FriendIcon className="text-neutral-03" />
         </button>

AlarmIcon 버튼에도 동일하게 적용:

             <button
               className="relative flex cursor-pointer items-center justify-center"
               onClick={() => setIsAlarmNew(false)}
+              aria-label="새 알림"
             >
-              <AlarmIcon className="text-neutral-03 h-6 w-6 cursor-pointer" />
+              <AlarmIcon className="text-neutral-03 h-6 w-6" />

src/components/friends/SearchField.tsx (1)

9-13: 접근성: input에 label이 필요합니다.

스크린 리더 사용자를 위해 <label>을 추가하거나 aria-label 속성을 사용해주세요. 또한 input의 배경색이 부모와 다를 수 있으므로 bg-transparent를 추가하는 것이 좋습니다.

♻️ 개선 제안

         <input
           type="text"
           placeholder="친구이름을 검색해보세요"
-          className="w-full focus:outline-none"
-        ></input>
+          aria-label="친구 검색"
+          className="w-full bg-transparent focus:outline-none"
+        />

src/components/common/BackHeader.tsx (1)

49-52: subtext 버튼에 type과 onClick 핸들러가 필요합니다.

"편집하기" 같은 텍스트가 버튼으로 렌더링되지만, 클릭 시 동작이 정의되어 있지 않습니다. onClick prop을 추가하거나, 동작이 없다면 <span>으로 변경하는 것을 고려해주세요.

♻️ onClick prop 추가 제안

 interface HeaderProps {
   title: string;
   timeAgo?: string;
   menuIcon?: boolean;
   titleColor?: string;
   subtext?: string;
+  onSubtextClick?: () => void;
 }

-      {subtext && (
-        <button className="text-h3 text-neutral-04 absolute top-1/2 right-4 -translate-y-1/2 cursor-pointer">
+      {!menuIcon && subtext && (
+        <button
+          type="button"
+          onClick={onSubtextClick}
+          className="text-h3 text-neutral-04 absolute top-1/2 right-4 -translate-y-1/2 cursor-pointer"
+        >
           {subtext}
         </button>
       )}

src/app/friends/page.tsx (2)

14-16: SearchField에 가로 패딩이 필요합니다.

FriendList는 내부에 px-4가 있지만, SearchField는 패딩 없이 렌더링되어 정렬이 맞지 않을 수 있습니다.

♻️ 패딩 추가 제안

       <div className="mt-[30.5px] flex flex-col gap-5">
-        <SearchField />
+        <div className="px-4">
+          <SearchField />
+        </div>
         <FriendList />
       </div>

---

20-22: FAB 버튼에 접근성 속성과 클릭 핸들러가 필요합니다.

type="button", aria-label, 그리고 onClick 핸들러를 추가해주세요.

♻️ 개선 제안

-          <button className="bg-mint-01 mr-4 ml-auto flex h-[70px] w-[70px] items-center justify-center rounded-full shadow-[0_0_10px_0_rgba(0,0,0,0.10)]">
+          <button
+            type="button"
+            aria-label="친구 추가"
+            onClick={() => {/* TODO: 친구 추가 로직 */}}
+            className="bg-mint-01 mr-4 ml-auto flex h-[70px] w-[70px] cursor-pointer items-center justify-center rounded-full shadow-[0_0_10px_0_rgba(0,0,0,0.10)]"
+          >
             <FriendAddIcon className="h-10 w-10 text-white" />
           </button>

src/components/friends/FrinedList.tsx (1)

5-27: 컴포넌트를 재사용 가능하도록 props를 통해 데이터를 받도록 개선해주세요.

현재 목업 데이터를 직접 import하고 있어 다른 부분에서 재사용하기 어렵습니다. props 패턴으로 변경하면 재사용성을 높일 수 있습니다.

♻️ Props 패턴 제안

 import Image from "next/image";

-import friendListData from "@/mock/friendList.json";
+interface Friend {
+  userId: string;
+  userName: string;
+  profileImg: string;
+}

-export const FriendList = () => {
+interface FriendListProps {
+  friends: Friend[];
+}
+
+export const FriendList = ({ friends }: FriendListProps) => {
   return (
     <section>
       <div className="flex gap-1 px-4">
         <p className="text-sub1-r text-neutral-04">친구</p>
-        <p className="text-sub1-r text-neutral-04">{friendListData.length}</p>
+        <p className="text-sub1-r text-neutral-04">{friends.length}</p>
       </div>
-      {friendListData.map(friend => (
+      {friends.map(friend => (

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}

src/components/friends/ProfileModal.tsx (2)

7-19: 컴포넌트 이름과 실제 구현이 불일치합니다.

ProfileModal이라는 이름은 모달 동작(오버레이, 닫기 버튼, 포커스 관리 등)을 암시하지만, 현재 구현은 단순히 이미지를 래핑한 div입니다.

두 가지 중 하나를 고려해 주세요:

1. 실제 모달 기능이 필요하다면 모달 관련 기능(backdrop, 닫기 버튼, role="dialog", aria-modal 등)을 추가
2. 단순 프로필 이미지 표시용이라면 ProfileImage 또는 ProfileAvatar로 이름 변경

---

10-16: 프로필 이미지 로딩 실패 시 대응이 없습니다.

외부 이미지 URL 로딩 실패 시 사용자 경험이 저하될 수 있습니다. 이미지 로드 실패에 대비한 fallback 이미지나 placeholder 적용을 고려해 주세요.

💡 개선 예시

+import { useState } from "react";
 import Image from "next/image";
+
+const DEFAULT_PROFILE_IMG = "/images/default-profile.png"; // 적절한 경로로 수정

 interface ProfileModalProps {
   profileImg: string;
   userName: string;
 }
 export const ProfileModal = ({ profileImg, userName }: ProfileModalProps) => {
+  const [imgSrc, setImgSrc] = useState(profileImg);
+
   return (
     <div>
       <Image
-        src={profileImg}
+        src={imgSrc}
         alt={`${userName}의 프로필이미지`}
         width={174}
         height={174}
         className="object-cover"
+        onError={() => setImgSrc(DEFAULT_PROFILE_IMG)}
       />
     </div>
   );
 };

src/components/friends/FrinedList.tsx (1)

56-65: 리스트 항목 키보드 접근성 보완 권장

Line 56-65의 클릭 영역이 <div>라 키보드 사용자가 선택/모달 열기를 하기 어렵습니다. role="button", tabIndex, onKeyDown으로 Enter/Space를 처리해 주세요. 키보드/스크린리더 동작 확인도 부탁드립니다.

♿ 제안 변경

         <div
           key={friend.userId}
           className="hover:bg-neutral-10 flex cursor-pointer gap-4 px-4 py-[10px]"
           onClick={() => {
             if (isEditMode) {
               onToggleFriend(friend.userId);
               return;
             }
             profileModalOpen(friend);
           }}
+          role="button"
+          tabIndex={0}
+          onKeyDown={e => {
+            if (e.key !== "Enter" && e.key !== " ") return;
+            e.preventDefault();
+            if (isEditMode) {
+              onToggleFriend(friend.userId);
+              return;
+            }
+            profileModalOpen(friend);
+          }}
         >

src/components/common/GlassStyleHeader.tsx (1)

4-4: 사용하지 않는 import 제거

useState가 import되었지만 이 컴포넌트에서 사용되지 않습니다.

🧹 제안된 수정

-import { useState } from "react";